<html>
	<!--
		we use a quirks-mode DTD on purpose to ensure that things go tilt. Wheee!!
	-->
	<head>
		<title>testing Core HTML/DOM/CSS/Style utils in quirks mode</title>
		<style type="text/css">
			@import "../../resources/dojo.css";
		</style>
		<script type="text/javascript" 
			src="../../dojo.js" 
			djConfig="isDebug: true"></script>
		<script type="text/javascript">
			dojo.require("doh.runner");
			dojo.addOnLoad(function(){
				doh.register("t", 
					[
						"t.is(100, dojo.marginBox('sq100').w);",
						"t.is(100, dojo.marginBox('sq100').h);",

						"t.is(120, dojo.marginBox('sq100margin10').w);",
						"t.is(120, dojo.marginBox('sq100margin10').h);",
						"t.is(100, dojo.contentBox('sq100margin10').w);",
						"t.is(100, dojo.contentBox('sq100margin10').h);",

						// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
						//"t.is(100, dojo.marginBox('sq100nopos').w);",
						"t.is(100, dojo.marginBox('sq100nopos').h);",

						function coordsBasic(t){
							var pos = dojo.coords("sq100", false);
							// console.debug(pos);
							t.is(100, pos.x);
							t.is(100, pos.y);
							t.is(100, pos.w);
							t.is(100, pos.h);
						},
						function coordsMargin(t){
							// coords is getting us the margin-box location, is
							// this right?
							var pos = dojo.coords("sq100margin10", false);
							t.is(260, pos.x);
							t.is(110, pos.y);
							t.is(120, pos.w);
							t.is(120, pos.h);
						},
						function sq100nopos(t){
							var pos = dojo.coords("sq100nopos", false);
							// console.debug(pos);
							t.is(0, pos.x);
							t.t(pos.y > 0);
							// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
							//t.is(100, pos.w);
							t.is(100, pos.h);
						}
					]
				);
				if(dojo.isIE){ 
					// IE collapses padding in quirks mode. We just report on it.
					doh.register("t", 
						[
							"t.is(120, dojo.marginBox('sq100margin10pad10').w);",
							"t.is(120, dojo.marginBox('sq100margin10pad10').h);",

							"t.is(100, dojo.marginBox('sq100pad10').w);",
							"t.is(100, dojo.marginBox('sq100pad10').h);",

							"t.is(100, dojo.marginBox('sq100ltpad10').w);",
							"t.is(100, dojo.marginBox('sq100ltpad10').h);",
							"t.is(90, dojo.contentBox('sq100ltpad10').w);",
							"t.is(90, dojo.contentBox('sq100ltpad10').h);",

							"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').w);",
							"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').h);",

							"t.is(100, dojo.marginBox('sq100border10').w);",
							"t.is(100, dojo.marginBox('sq100border10').h);",
							"t.is(80, dojo.contentBox('sq100border10').w);",
							"t.is(80, dojo.contentBox('sq100border10').h);",

							"t.is(120, dojo.marginBox('sq100border10margin10').w);",
							"t.is(120, dojo.marginBox('sq100border10margin10').h);",
							"t.is(80, dojo.contentBox('sq100border10margin10').w);",
							"t.is(80, dojo.contentBox('sq100border10margin10').h);",

							"t.is(120, dojo.marginBox('sq100border10margin10pad10').w);",
							"t.is(120, dojo.marginBox('sq100border10margin10pad10').h);",
							"t.is(60, dojo.contentBox('sq100border10margin10pad10').w);",
							"t.is(60, dojo.contentBox('sq100border10margin10pad10').h);"
						]
					);
				}else{
					doh.register("t", 
						[
							"t.is(140, dojo.marginBox('sq100margin10pad10').w);",
							"t.is(140, dojo.marginBox('sq100margin10pad10').h);",

							"t.is(120, dojo.marginBox('sq100pad10').w);",
							"t.is(120, dojo.marginBox('sq100pad10').h);",

							"t.is(110, dojo.marginBox('sq100ltpad10').w);",
							"t.is(110, dojo.marginBox('sq100ltpad10').h);",
							"t.is(100, dojo.contentBox('sq100ltpad10').w);",
							"t.is(100, dojo.contentBox('sq100ltpad10').h);",

							"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
							"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",

							"t.is(120, dojo.marginBox('sq100border10').w);",
							"t.is(120, dojo.marginBox('sq100border10').h);",
							"t.is(100, dojo.contentBox('sq100border10').w);",
							"t.is(100, dojo.contentBox('sq100border10').h);",

							"t.is(140, dojo.marginBox('sq100border10margin10').w);",
							"t.is(140, dojo.marginBox('sq100border10margin10').h);",
							"t.is(100, dojo.contentBox('sq100border10margin10').w);",
							"t.is(100, dojo.contentBox('sq100border10margin10').h);",

							"t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
							"t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
							"t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
							"t.is(100, dojo.contentBox('sq100border10margin10pad10').h);"
						]
					);
				}

				doh.run();
			});
		</script>
		<style type="text/css">
			html, body {
				padding: 0px;
				margin: 0px;
				border: 0px;
			}

			#sq100 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100margin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 0px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100margin10pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 10px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 10px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100ltpad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding-left: 10px;
				padding-top: 10px;
				padding-right: 0px;
				padding-bottom: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100ltpad10rbmargin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 250px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding-left: 10px;
				padding-top: 10px;
				padding-right: 0px;
				padding-bottom: 0px;
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 10px;
				margin-bottom: 10px;
				overflow: hidden;
			}

			#sq100border10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 0px;
				margin: 0px;
				overflow: hidden;
			}

			#sq100border10margin10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 250px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 0px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100border10margin10pad10 {
				background-color: black;
				color: white;
				position: absolute;
				left: 400px;
				top: 400px;
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				padding: 10px;
				margin: 10px;
				overflow: hidden;
			}

			#sq100nopos {
				background-color: black;
				color: white;
				width: 100px;
				height: 100px;
				padding: 0px;
				margin: 0px;
			}

		</style>
	</head>
	<body>
		<h1>testing Core HTML/DOM/CSS/Style utils</h1>
		<div id="sq100">
			100px square, abs
		</div>
		<div id="sq100margin10">
			100px square, abs, 10px margin
		</div>
		<div id="sq100margin10pad10">
			100px square, abs, 10px margin, 10px padding
		</div>
		<div id="sq100pad10">
			100px square, abs, 10px padding
		</div>
		<div id="sq100ltpad10">
			100px square, abs, 10px left and top padding
		</div>
		<div id="sq100ltpad10rbmargin10">
			100px square, abs, 10px left and top padding, 10px bottom and right margin
		</div>
		<div id="sq100border10">
			100px square, abs, 10px yellow border
		</div>
		<div id="sq100border10margin10">
			100px square, abs, 10px yellow border, 10px margin
		</div>
		<div id="sq100border10margin10pad10">
			100px square, abs, 10px yellow border, 10px margin, 10px padding
		</div>
		<div id="sq100nopos">
			100px square, no positioning
		</div>
	</body>
</html>

